import React from 'react';

import styles from './index.module.css';

const Step = (props) => {
    const { title, description, subTitle, index, current, length } = props;

    // 最后一个不要划线
    const renderLine = () => {
        if(index<length){
            return (
                <div className={`${styles['line']} ${styles[lineStyle()]}`}></div>
            )
        }else{
            return undefined;
        }
    }

    const wrapStyle = () => {
        if(index===length){
            return 'wrap-1';
        }
    }

    // icon内容
    const  iconText = () => {
        if(index<current){
            return '✔' 
        }else{
            return index;
        }
    }

    // icon样式
    const iconStyle = () => {
        if(index===current){
            return 'icon-1';
        }else{
            return 'icon-2';
        }
    }

    // title样式
    const titleStyle = () => {
        if(index<=current){
            return 'title-1'
        }
    }

    // description样式
    const desStyle = () => {
        if(index===current){
            return 'title-1'
        }
    }

    // line样式
    const lineStyle = () => {
        if(index<current){
            return 'line-1'
        }
    }

    return (
        <div className={`${styles['wrap']} ${styles[wrapStyle()]}`}>
            <div className={`${styles['icon']} ${styles[iconStyle()]}`}>{iconText()}</div>
            <div className={styles['word-wrap']}>
                <div className={styles['title-wrap']}>
                    <div className={`${styles['title']} ${styles[titleStyle()]}`}>{title}</div>
                    <div className={styles['sub-title']}>{subTitle}</div>
                    {renderLine()}
                </div>
                <div className={`${styles['description']} ${styles[desStyle()]}`}>{description}</div>
            </div>
        </div>
    )
}

export default Step;